<template>
  <j-modal
    :title="'数据集明细'"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :fullscreen="true"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button> 
    </template>
    <a-spin :spinning="confirmLoading">  
        <base-info :dataSetInfo="dataSetInfo"></base-info>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          class="j-table-force-nowrap"
          :scroll="{ x: true }"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          @change="handleTableChange"
        >
        </a-table> 
    </a-spin> 
  </j-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin' 
import DetailList from '@/components/tools/DetailList' 
import BaseInfo from './dataSet/BaseInfo' 
const DetailListItem = DetailList.Item

export default {
  name: 'ExtractModal',
  mixins: [JeecgListMixin],
  components: { 
    DetailList,
    DetailListItem,
    BaseInfo
  },
  data() {
    return {
      title: '',
      dataSetInfo:{
        code:''
      },
      dataSetId:0,
      width: 900,
      height: 500,  
      visible: false,
      disableSubmit: false,
      // url: {
      //   list: "/dataHistory/dataHistory/list"
      // },
      model: {
        propName: '',
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        }
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false, 
    }
  },
  methods: {
     show(data) { 
      this.columns = []
      this.dataSource =[]
      this.dataSetId = data.id;
      this.dataSetInfo = Object.assign({},data);
      this.loadDataProperty() 
    },
    loadDataProperty() {
      var that = this
      httpAction('/dataProperty/dataProperty/list?pageSize=99999', {}, 'get')
        .then((res) => {
          if (res.success) {
            that.dataPropertyList = res.result.records
            that.loadDetailData(1,10)
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {})
    },
    getPropertyText(key) {
      let filterList = this.dataPropertyList.filter((item) => item.propNo == key)
      if (filterList.length > 0) {
        return filterList[0].propName
      }
      return key
    }, 
   
    loadDetailData(pageNo,pageSize) { 
      var that = this;
      this.visible = true
      this.confirmLoading = true
      httpAction('/dataSet/dataSet/queryByIdDetail?pageNo='+pageNo+'&pageSize='+pageSize+'&id='+that.dataSetId, {}, 'get')
        .then((res) => { 
          if (res.success) { 
            var list = []
            //var data = res.result.records
            var data = res.result.records
            that.columns =  [{
                title: '#',
                dataIndex: '',
                key: 'rowIndex',
                width: 60,
                align: 'center',
                customRender: function (t, r, index) {
                  return parseInt(index) + 1
                },
            }]
          for (const key in data[0]) {
             that.columns.push( {
                  title: that.getPropertyText(key),
                  align: 'center',
                  dataIndex: key,
                } ) 
          } 
            that.dataSource = data 
            that.ipagination.current = pageNo;
            that.ipagination.pageSize = pageSize;
            that.ipagination.total = res.result.total
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.confirmLoading = false
        })
    },
    handleTableChange(pagination, filters, sorter) { 
      this.loadDetailData(pagination.current,pagination.pageSize)
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.$emit('close')
      this.visible = false
    }, 
    handleCancel() {
      this.close()
    }
  },
}
</script>